<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>流通产品-普通药品追溯分析</title>
        <link rel="stylesheet" href="../src/css/modal.css">
        <link rel="stylesheet" href="../src/css/index.css">
        <link rel="stylesheet" href="../src/css/common.css">
        <link rel="stylesheet" href="../src/css/ptypzsfx.css">
        <script>
        (function setPageScale(window, document) {
        function setBodyScale() {
        var zoom = (window.innerHeight / 1080).toFixed(3)
        if (document.body) {
        document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
        } else {
        document.addEventListener('DOMContentLoaded', setBodyScale)
        }
        }
        setBodyScale();
        // reset scale unit on page resize窗口改变时候重新设置缩放
        window.addEventListener('resize', setBodyScale)
        window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
        setBodyScale()
        }
        })
        }(window, document))
        </script>
        <!--[if lt IE 9]>
        <script src="../src/js/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <div class="wrapper" id="app">
            <div class="global-content">
                <header class="header">
                </header>
                <section class="main clearfix">
                    <nav class="navs">
                        <div class="nav-item">
                            <a href="javascript:;" class="ltcp on">
                                流通产品
                            </a>
                        </div>
                        <div class="nav-item">
                            <a href="./jyqy.html" class="jyqy  ">
                                <span class="badge">2</span>
    
                                经营企业
                            </a>
                        </div>
                        <div class="nav-item">
                            <a href="./qtxx.html" class="qtxx ">
                                <span class="badge">2</span>
    
                                其他信息
                            </a>
                        </div>
    
                        
                    </nav>
                    <div class="content-box ">
                        <div class="ready_container " :class="isReady?'data-ready':''">
                            
                            <div class="content-box-area flex">
                                <div class="cb-left relative">
                                    <!--产品生产企业及进销存数量-->
                                    <div class="stat-1 mb10">
                                        <div class="s-title s-title-1"></div>
                                        <div class="table-container pt20">
                                            <table class="text-center f16">
                                                <tr>
                                                    <th style="width: 90px">产品名称</th>
                                                    <th style="width: 90px">来源企业</th>
                                                    <th style="width: 90px">全省流入总量</th>
                                                    <th style="width: 90px">全省销售总量</th>
                                                    <th style="width: 80px">全省库存总量</th>
                                                </tr>
                                                <!-- <template > -->
                                                <tr v-for="(item,index) in stat1.productList">
                                                    <td>{{item.name}}</td>
                                                    <td>{{item.qy}}</td>
                                                    <td>{{item.qslrzl}}人份</td>
                                                    <td>{{item.qsxszl}}人份</td>
                                                    <td>{{item.qskczl}}人份</td>
                                                </tr>
                                                <!-- </template> -->
                                            </table>
                                        </div>
                                    </div>
                                    <!--产品近6个月抽查不合格变化趋势-->
                                    <div class="stat-2 mb10" >
                                        <div class="s-title s-title-2"></div>
                                        <v-chart :options="stat2.chartOption" class="echart_c_2" />
                                    </div>
                                    <!--产品近6个月不良反应趋势-->
                                    <div class="stat-3" >
                                        <div class="s-title s-title-3"></div>
                                        <v-chart :options="stat3.chartOption" class="echart_c_3" />
                                    </div>
                                    
                                </div>
                                
                                <div class="cb-right ">
                                    <div class="s-title s-title-4"></div>
                                    <div class="pl20 pr20 ">
                                        <div class="search_content mb20 pl20 pt10 pb20 f16 mt20">
                                            
                                            <div class="fx-item flex mb10 mt20">
                                                
                                                <div class="flex-1 ">
                                                    <span class="l-name l-width-2">产品：</span>
                                                    <span>
                                                        <select class="form-control  inline-block w1">
                                                            <option value="1">产品1</option>
                                                            <option value="2">产品2</option>
                                                            <option value="3">产品3</option>
                                                        </select>
                                                        
                                                    </span>
                                                </div>
                                                
                                                
                                                <div class="flex-1 text-right pr20">
                                                    <span class="l-name l-width-2 pl10">时间：</span>
                                                    <span>
                                                        <input type="text" placeholder="" class="form-control  w2">
                                                        <span class="color-blue">-</span>
                                                        <input type="text" placeholder="" class="form-control  w2">
                                                    </span>
                                                </div>
                                                
                                            </div>
                                            <div class="fx-item flex mb10">
                                                
                                                <div class="flex-1 ">
                                                    <span class="l-name l-width-2">批号：</span>
                                                    <span>
                                                        <select class="form-control  inline-block w1">
                                                            <option value="1">批号1</option>
                                                            <option value="2">批号2</option>
                                                            <option value="3">批号3</option>
                                                        </select>
                                                    </span>
                                                    
                                                </div>
                                                
                                                <div class="flex-1 ">
                                                </div>
                                            </div>
                                            
                                            <div class="text-right pr20">
                                                <button class="mr10" @click="submitForm" >提交</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="tab-group stat_tab">
                                            <a href="javascript:;" :class="tab==1?'on':''" @click="tab=1">地图模式</a>
                                            <a href="javascript:;" :class="tab==2?'on':''"  @click="tab=2">列表模式</a>
                                        </div>
                                        <div class="map_container text-center" v-if="tab==1">
                                            <v-chart :options="stat4.chartOption" class="echart_c_4 inline-block" @click="showMapInfo"/>
                                        </div>
                                        <div class="list_container" v-else-if="tab==2">
                                            <div class=" flex ">
                                                <div class="flex-1 pic_left text-right"><img src="../src/img/ptypzsfx/pic_sz_left.png"/></div>
                                                <div class="s-t-word f18"><span>产品流向及进销存情况</span></div>
                                                <div class="flex-1 pic_right text-left"><img src="../src/img/ptypzsfx/pic_sz_right.png"/></div>
                                            </div>
                                            <div class="pl20 pr20">
                                                <div class="list_container_scroll text-left ">
                                                    <table class="text-center f16 mt20">
                                                        <thead>
                                                            <th ></th>
                                                            <th  colspan="3">杭州市</th>
                                                            <th  colspan="3">嘉兴市</th>
                                                            <th  colspan="3">湖州市</th>
                                                            <th  colspan="3">绍兴市</th>
                                                            <th  colspan="3">温州市</th>
                                                            <th  colspan="3">温州市</th>
                                                            <th  colspan="3">温州市</th>
                                                            <th  colspan="3">绍兴市</th>
                                                            <th  colspan="3">温州市</th>
                                                            <th  colspan="3">温州市</th>
                                                            <th  colspan="3">温州市</th>
                                                        </thead>
                                                        <tr class="str">
                                                            <td><div style="width: 132px">产品名称</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                            <td><div style="width: 80px">进</div></td>
                                                            <td><div style="width: 90px">销</div></td>
                                                            <td><div style="width: 90px">库存</div></td>
                                                        </tr>
                                                        <!-- <template > -->
                                                        <tr v-for="i in 8">
                                                            <td >感康</td>
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                            <td class="t-color-1">1000</td>
                                                            <td class="t-color-2">20</td>
                                                            <td class="t-color-3">980</td>
                                                        </tr>
                                                        <!-- </template> -->
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </section>
            </div>
            <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered dialog1" role="document">
                    <div class="modal-content " >
                        <div class="modal-header">
                            <h5 class="modal-title">XX市产品进销存数量</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body ">
                            <div class="d-content">
                                <table class="text-center f16">
                                    <tr>
                                        <th style="width: 150px">产品名称</th>
                                        <th style="width: 150px">流入总量</th>
                                        <th style="width: 150px">销售总量</th>
                                        <th style="width: 150px">库存总量</th>
                                    </tr>
                                    <!-- <template > -->
                                    <tr v-for="(item,index) in stat4.productList">
                                        <td>{{item.name}}</td>
                                        <td>{{item.lrzl}}人份</td>
                                        <td>{{item.xszl}}人份</td>
                                        <td>{{item.kczl}}人份</td>
                                    </tr>
                                    <!-- </template> -->
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="../src/img/back.png" class="go-back" @click="goBack">
        </div>
    </body>
    <script type="text/javascript" src="../src/js/jquery-1.11.1.min.js"></script>
    <script src="../src/js/vue.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/vue-echarts@4.0.2"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/chart-options-ptypzsfx.js"></script>
    <script type="text/javascript" src="../src/js/ptypzsfx.js"></script>
</html>